<template>
  <Modal v-model="drawer.show" :closable="drawer.status == 'read'"
    :width="90" :mask-closable="false" :styles="styles" fullscreen >
    <span slot="header" :style="titleStyle">{{ lang.config }}</span>
    <div slot="footer" class="flex">
      <div class="flex1" style="textAlign: left;">
        <Button @click="webObject.loadData()" type="primary" ghost>读取source数据</Button>
        <Button @click="webObject.updateData()" type="primary" ghost>提交更新</Button>
      </div>
      <Button v-if="drawer.status!=='read'" @click="drawer.show = false">{{ $t(`global.cancel`) }}</Button>
      <Button type="primary" class="ivu-ml" @click="ok"
        >{{ drawer.status!=='read' ? $t(`global.save`) : $t(`global.close`) }}</Button>
    </div>
    <div v-if="drawer.show && classObject.record && !!webObject" 
      style="display:flex;height:100%;width:100%" @mouseleave="draw.show=true" @contextmenu.capture="configPanel">
      <cli-area  :webObject="webObject"></cli-area>
      <cfg-template-current-config :e="e" :webObject="webObject"></cfg-template-current-config>
  <!--    <tpl-config :draw="draw" :webObject="webObject" @mouseout.prevent="draw.show=false"></tpl-config>-->
    </div>
  </Modal>
</template>

<script>
import CliArea from "./client/cli-area";
import TplTable from "./client/cli-table";
import templateWeb from "./model/templateWeb";
import CfgTemplateCurrentConfig from "./config/cfg-template-current-config";
export default {
  name: "index",
  components: {CfgTemplateCurrentConfig, CliArea, TplTable},
  data(){
    return {
      styles: {top: 0, left: 0, right: 0, maxWidth: '1200px', margin: 'auto'},
      titleStyle: {},
      // web 相关
      e:null,
      webObject:null,
      draw:{
        show:false,
      },
      web:{
        layout:[
          {
            id:this.tools.uuid(),
            name:'root',
            type:'root',
            attr:{},
            style:{width:'100%',height:'100%',borderWidth:'1px',borderColor:'gray',borderStyle:'solid'},
            source:'data',
            children:[]
          }
        ],
        elements:[
          {
            address:'root',
            type:'table',
            config:{
              columns:[
                {
                  title:'abc1',
                  slot:'values.abc1',
                  config:{
                    type:'text',
                  }
                },
                {
                  title:'abc1',
                  slot:'values.abc2',
                  config:{
                    type:'text'
                  }
                },
              ],
            }
          }
        ],
        source:[
          // {
          //   sourceName:'',
          //   model:'',
          //   type:'',
          //   className:'',
          //   condition:'',
          // }
        ]
      },
      source:{
        data:[
          {
            type:'crawMaterial',
            className:'bill',
            values:{
              abc1:'abc1111',
              abc2:'abc2'
            }
          },
          {
            type:'crawMaterial',
            className:'bill',
            values:{
              abc1:'abc1',
              abc2:'abc2'
            }
          }
        ]
      },

    }
  },
  beforeMount() {
    // this.webObject=templateWeb.create();
    // this.webObject.record.elements.push(templateWeb.tableConfig())
    // this.webObject.source={
    //   data:[
    //     {
    //       type:'crawMaterial',
    //       className:'bill',
    //       values:{
    //         abc1:'abc1111',
    //         abc2:'abc2'
    //       }
    //     },
    //     {
    //       type:'crawMaterial',
    //       className:'bill',
    //       values:{
    //         abc1:'abc1',
    //         abc2:'abc2'
    //       }
    //     }
    //   ]
    // }
  },
  methods:{
    configPanel(e){
      e.preventDefault();
      this.e=e;
      console.log(e)
    },
    // 提交添加或修改数据
    ok() {
      console.log("🚀 ~ file: webModal.vue:139 ~ ok ~ this.webObject.record:", this.webObject.record)
      this.classObject.record.web = this.webObject.record
      this.$emit('submit')
    },
    // submit() {
    //   console.log("🚀 ~ file: cfgModalHier.vue:50 ~ submit", this.webObject.hierProperties)
    // },
  },
  watch: {
    'drawer.show'(val) {
      if (val) {
        this.webObject = templateWeb.create(this.classObject.record.web);
      }
    }
  },
  props: {
    drawer: {
      default: () => {
        return {
          status: 'edit', // new edit read
          show: true,
        };
      }
    },
    classObject: {
      default() {
        return null
      }
    },
    modelList: {
      default() {
        return []
      }
    },
    isInstance: {
      default: false
    },
  },
  computed: {
    lang() {
      return {
        "en-US": {
          edit: 'edit',
          new: 'new',
          read: 'read',
          action: 'action',
          submit: 'submit',
          config: 'config',
        },
        "zh-CN": {
          edit: '编辑',
          new: '添加',
          read: '查看',
          action: '操作',
          submit: '提交',
          config: '配置',
        },
      }[this.G_Locale]
    },
  },
}
</script>

<style scoped>
</style>
